<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2003), see www.w3.org"/>
    <title>JavaScript: Basics</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="copyright" content="Copyright &#169; 2005-2010 W3C (MIT, ERCIM, Keio)"/>
    <meta name="duration" content="5"/>
    <meta name="font-size-adjustment" content="-2"/>

    <link rel="stylesheet" href="styles/slidy.css" type="text/css"/>
    <link rel="stylesheet" href="styles/w3c-blue.css" type="text/css"/>
    <script type="text/javascript" src="scripts/slidy.js" charset="utf-8">//</script>

    <link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
    <script type="text/javascript" src="scripts/shCore.js"></script>
    <script type="text/javascript" src="scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="scripts/shBrushJava.js"></script>

    <link type="text/css" rel="stylesheet" href="styles/presentation.css"/>
    <script type="text/javascript" src="scripts/presentation.js"></script>
</head>


<body style="">
<div class="background">
    <img alt="" id="head-icon" src="graphics/icon-blue.png"/>
</div>

<div class="background slanty">
</div>

<div class="slide cover title">
    <img class="hidden" src="graphics/bullet.png" alt=""/>
    <img class="hidden" src="graphics/fold.gif" alt=""/>
    <img class="hidden" src="graphics/unfold.gif" alt=""/>
    <img class="hidden" src="graphics/fold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/nofold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/unfold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-fold.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-unfold.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-fold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-nofold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-unfold-dim.gif" alt=""/>

    <h1>JavaScript: Basics</h1>

    <div style="position: absolute; bottom: 20px;">
        <p>Alex.Kolonitsky@gmail.com</p>
        <p><a href="http://javascript-learning-courses.googlecode.com">http://javascript-learning-courses.googlecode.com</a></p>
    </div>
</div>

<div class="slide">
    <h1>Content</h1>

    <ul>
        <li>JS Introduction</li>
        <li>DOM</li>
        <li>Events</li>
    </ul>
</div>

<div class="slide">
    <h1>01</h1>

    <pre class="brush: js">
        var y = 1, x = y = typeof x;
        x;
    </pre>

    <ul class="incremental">
        <li>1</li>
        <li>"number"</li>
        <li>undefined</li>
        <li>"undefined"</li>
    </ul>
</div>

<div class="slide">
    <h1>02</h1>

    <pre class="brush: js">
        (function f(f) {
            return typeof f();
        })(function () { return 1; })
    </pre>

    <ul class="incremental">
        <li>"number"</li>
        <li>"undefined"</li>
        <li>"function"</li>
        <li>Error</li>
    </ul>
</div>


<div class="slide">
    <h1>03</h1>

    <p>Какое из этих ключевых слов ООП не используется в javascript (1.5) </p>

    <ul>
        <li>this</li>
        <li>instanceOf</li>
        <li>super</li>
        <li>new</li>
        <li>Все есть</li>
    </ul>
</div>

<div class="slide">
    <h1>04</h1>

    <p>Есть ли разница между выражениями?</p>
    <pre class="brush: js">
        !!(a && b)
        (a && b)
    </pre>

    <ul>
        <li>Да</li>
        <li>Нет</li>
        <li>В первом выражении ошибка, что еще за "!!" ??</li>
    </ul>
</div>

<div class="slide">
    <h1>05</h1>

    <p>Какова длина a.length массива a ?</p>
    <pre class="brush: js">
        var a = []
        a[1] = 5
        a[5] = 55
    </pre>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>Другое</li>
    </ul>
</div>

<div class="slide">
    <h1>06</h1>

    <p>Чему равно i в конце кода ?</p>
    <pre class="brush: js">
        var i = 5
        {
           var i = 1
        }
    </pre>

    <ul>
        <li>1</li>
        <li>5</li>
        <li>undefined</li>
        <li>Error</li>
    </ul>
</div>

<div class="slide">
    <h1>JS Introduction</h1>
</div>

<div class="slide">
    <h1>Content</h1>

    <ul class="content">
        <li class="done">JS Introduction</li>
        <li class="current">DOM</li>
        <li>Events</li>
    </ul>
</div>

<div class="slide">
    <h1>DOM</h1>

    <ul>
        <li>Что такое DOM?</li>
        <li>Как в нем можно что-то найти?</li>
        <li>Как его можно модифицировать?</li>
    </ul>
</div>

<div class="slide">
    <h1>Что такое DOM?</h1>
</div>

<div class="slide">
    <h1>Как в нем можно что-то найти?</h1>

    <ul>
        <li>getElementBy…</li>
        <li>XPath</li>
        <li>TreeWalker</li>
        <li>The DOM tree</li>
        <li>Frameworks</li>
    </ul>
</div>

<div class="slide">
    <h1>getElementBy…</h1>

    <ul>
        <li>getElementsByTagName</li>
        <li>getElementsByClassName</li>
        <li>getElementById</li>
        <li>querySelectorAll</li>
    </ul>

    <pre class="brush: js">
        document.querySelectorAll(".slide")[23].getElementsByTagName("ul");
    </pre>
</div>

<div class="slide">
    <h1>XPath</h1>

    <pre class="brush: js">
        document.evaluate("//*[@title]", document,
            null, XPathResult.ANY_TYPE, null);
    </pre>
</div>

<div class="slide">
    <h1>The DOM tree</h1>

    <pre class="brush: js">
        x.parentNode.firstChild.nextSibling.children[2]
    </pre>
    <ul>
        <li>childNodes[]</li>
        <li>children[]</li>
        <li>first/last Child</li>
        <li>nextSibling</li>
        <li>parentNode</li>
        <li>previousSibling</li>
    </ul>
</div>

<div class="slide">
    <h1>Как его можно модифицировать?</h1>

    <ul>
        <li>innerHTML</li>
        <li>appendChild</li>
        <li>clone</li>
    </ul>
</div>

<div class="slide">
    <h1>innerHTML</h1>

    <pre class="brush: js">
        var table = document.createElement("table"); // Создать элемент &lt;table>
        table.border = 1; // Установить атрибут
        // Добавить в таблицу заголовок Имя|Тип|Значение
        table.innerHTML = "&lt;tr>&lt;th>Имя&lt;/th>&lt;th>Тип&lt;/th>&lt;th>Значение&lt;/th>&lt;/tr>";
    </pre>
</div>

<div class="slide">
    <h1>appendChild</h1>

    <pre class="brush: js">
        // родительский элемент UL
        var list = document.getElementById('list2')
        // элемент для вставки перед ним (первый LI)
        var firstLi = list.getElementsByTagName('LI')[0]

        // новый элемент
        var newListElem = document.createElement('LI')
        newListElem.innerHTML = 'Новый элемент списка'

        // вставка
        list.insertBefore(newListElem, firstLi)
    </pre>
</div>

<div class="slide">
    <h1>clone</h1>

</div>

<div class="slide">
    <h1>Content</h1>

    <ul class="content">
        <li class="done">JS Introduction</li>
        <li class="done">DOM</li>
        <li class="current">Events</li>
    </ul>
</div>

<div class="slide">
    <h1>Events</h1>

    <ul>
        <li>Назначение обработчиков</li>
        <li>Event Object</li>
        <li>Порядок срабатывания событий</li>
        <li>Действие браузера по умолчанию</li>
    </ul>
</div>

<div class="slide">
    <h1>Через атрибут HTML-тега</h1>

    <pre class="brush: js">
        &lt;input id="b1" value="Нажми Меня"
            onclick="alert('Спасибо!');" type="button"/>
    </pre>
    <p>или так:</p>
    <pre class="brush: js">
        &lt;script type="text/javascript">
            function hello() {
                alert('Спасибо!');
            }
        &lt;/script>
        &lt;input type="button" onclick="hello()"
            value="Считать кролей!"/>
    </pre>
</div>

<div class="slide">
    <h1>Через свойство объекта</h1>

    <pre class="brush: js">
        &lt;input id="myElement" type="button"
            value="Нажми меня"/>

        document.getElementById('myElement').onclick
            = function() { alert('Спасибо') };

        function doSomething() {
            alert('Спасибо')
        };

        document.getElementById('button').onclick
            = doSomething;
    </pre>
</div>

<div class="slide">
    <h1>Специальные методы</h1>

    <ul>
        <li>
            <pre class="brush: js">
                element.addEventListener(имяCобытия,
                    обработчик, фаза)
                element.removeEventListener(имяCобытия,
                    обработчик, фаза)
            </pre>
        </li>
        <li>
            <p>IE особенный:</p>
            <pre class="brush: js">
                element.attachEvent( "on"+имя события,
                    обработчик)
                element.detachEvent( "on"+имя события,
                    обработчик)
            </pre>
        </li>
    </ul>
</div>

<div class="slide">
    <h1>Через фрэймворк</h1>

    <pre class="brush: js">
        // mootools
        element.addEvent(имяCобытия, обработчик);

        // jQuery
        $('#foo').bind('click', function() {
            alert('User clicked on "foo."');
        });
    </pre>
</div>

<div class="slide">
    <h1>Назначение обработчиков</h1>

    <ul>
        <li>Через атрибут HTML-тега</li>
        <li>Через свойство объекта</li>
        <li>Специальные методы</li>
        <li>Через фрэймворк</li>
    </ul>
</div>

<div class="slide">
    <h1>Events</h1>

    <ul class="content">
        <li class="done">Назначение обработчиков</li>
        <li class="current">Event Object</li>
        <li>Порядок срабатывания событий</li>
        <li>Действие браузера по умолчанию</li>
    </ul>
</div>

<div class="slide">
    <h1>Event Object</h1>

    <p>Объект событие всегда передается обработчику и содержит массу полезной информации о том где и какое событие произошло.</p>

    <pre class="brush: js">
        function doSomething(event) {
            event = event || window.event

            // Теперь event - объект события во всех браузерах.
        }

        element.onclick = doSomething
    </pre>
</div>

<div class="slide">
    <h1>Event Object</h1>

    <ul>
        <li>altKey, ctrlKey, metaKey, shiftKey</li>
        <li>charCode</li>
        <li>clientX, clientY</li>
        <li>currentTarget</li>
        <li>relatedTarget</li>
        <li>timestamp</li>
        <li>type</li>
        <li>...</li>
    </ul>
</div>

<div class="slide">
    <h1>Event Object</h1>

    <ul>
        <li><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-types" rel="nofollow" target="_blank">Event types</a></li>
        <li><a href="http://www.w3.org/TR/DOM-Level-3-Events/#events-focusevent-event-order" rel="nofollow"
               target="_blank">Event order</a></li>
    </ul>
</div>

<div class="slide">
    <h1>Events</h1>

    <ul>
        <li class="done">Назначение обработчиков</li>
        <li class="done">Event Object</li>
        <li class="current">Порядок срабатывания событий</li>
        <li>Действие браузера по умолчанию</li>
    </ul>
</div>

<div class="slide">
    <h1>Порядок срабатывания событий</h1>

    <img src="graphics/Events/event-order-bubbling.gif" alt="" style="float: right; margin: 1em;">
    <dl>
        <dt>Bubbling</dt>
        <dd>Такой порядок называется "всплывающим", потому что событие поднимается с самых "глубоких" элементов в представлении DOM, к самым "верхним", как пузырек воздуха в воде.</dd>
    </dl>
</div>

<div class="slide">
    <h1>Порядок срабатывания событий</h1>

    <img src="graphics/Events/event-order-capturing.gif" alt="" style="float: right; margin: 1em;">
    <dl>
        <dt>Capturing</dt>
        <dd>В этой модели сначала будет выполнен обработчик на элементе 1, затем - на элементе 2 и последним будет выполнен обработчик на элементе 3. Она называется "перехват", потому что родительские элементы могут обработать событие раньше, чем непосредственная цель события, как бы "перехватывая" обработку.</dd>
    </dl>
</div>

<div class="slide">
    <h1>Порядок срабатывания событий</h1>

    <table>
        <tr>
            <td>Bubbling</td>
            <td>Capturing</td>
        </tr>
        <tr>
            <td>
                <div class="d1" onclick="highlightMe(this)">d1
                    <div class="d2" onclick="highlightMe(this)">d2
                        <div class="d3" onclick="highlightMe(this)">d3</div>
                    </div>
                </div>
            </td>
            <td>
                <div id="capt1" class="d1">d1
                    <div id="capt2" class="d2">d2
                        <div id="capt3" class="d3">d3</div>
                    </div>
                </div>

                <script type="text/javascript">
                    function highlightMe(elem) {
                        elem.style.backgroundColor = 'yellow';
                        alert(elem.className);
                        elem.style.backgroundColor = ''
                    }

                    function highlightMe2(e) {
                        highlightMe(e.currentTarget);
                    }

                    document.getElementById("capt1").addEventListener("click", highlightMe2, true);
                    document.getElementById("capt2").addEventListener("click", highlightMe2, true);
                    document.getElementById("capt3").addEventListener("click", highlightMe2, true);
                </script>
            </td>
        </tr>
    </table>
</div>

<div class="slide">
    <h1>Порядок обработки в стандарте W3C</h1>

    <img src="graphics/Events/event-order-w3c.gif" alt=""  style="float: right; margin: 1em;"/>
    <p>При совершении действия, сначала событие перехватывается, пока не достигнет конечного элемента, затем всплывает.</p>
</div>

<div class="slide">
    <h1>Events</h1>

    <ul class="content">
        <li class="done">Назначение обработчиков</li>
        <li class="done">Event Object</li>
        <li class="done">Порядок срабатывания событий</li>
        <li class="current">Действие браузера по умолчанию</li>
    </ul>
</div>

<div class="slide">
    <h1>Действие браузера по умолчанию</h1>

    <p>Браузер имеет своё собственное поведение по умолчанию для различных событий (клик по ссылке).</p>

    <pre class="brush: js">
        element.onclick = function(event) {
            event = event || window.event

            if (event.preventDefault) {
                // Вариант стандарта W3C:
                event.preventDefault()
            } else {
                // Вариант Internet Explorer:
                event.returnValue = false
            }
        }
    </pre>
</div>

<div class="slide">
    <h1>Другое</h1>

    <ul>
        <li>В JS всего один поток выполнения.</li>
        <li>
            <pre class="brush: js">
                function handler(e) {
                  e.preventDefault() // браузер - стоять
                  e.stopPropagation() // событие - не всплывать
                  return false // и вообще, мне больше ничего не надо
                }
            </pre>
        </li>
    </ul>
</div>

<div class="slide">
    <h1>Events</h1>

    <p>Firebug events logging...</p>
</div>

<div class="slide">
    <h1>Ссылки</h1>

    <ul>
        <li><a href="http://javascript.ru/tutorial/events/intro">Введение в события</a></li>
        <li><a href="http://javascript.ru/tutorial/events">События</a></li>
        <li><a href="https://developer.mozilla.org/en/DOM/DOM_event_reference">DOM event reference</a></li>
        <li><a href="http://www.w3.org/TR/DOM-Level-3-Events/">Document Object Model (DOM) Level 3 Events Specification</a></li>
        <li><a href="http://habrahabr.ru/blogs/javascript/126471/">Events bubbling и events capturing</a></li>
    </ul>
</div>

</body>
</html>